<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moving - 运动康复</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f8fdf8;
            height: 100vh;
            overflow: hidden;
        }
        
        /* 启动页样式 */
        #splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f8fdf8;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        
        .splash-container {
            text-align: center;
            max-width: 90%;
            padding: 20px;
        }
        
        .app-title {
            font-size: 5rem;
            font-weight: 700;
            color: #2E7D32;
            margin-bottom: 1.5rem;
            letter-spacing: -2px;
            text-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
            animation: fadeInDown 0.8s ease-out;
        }
        
        .app-slogan {
            font-size: 1.6rem;
            color: #4CAF50;
            margin-bottom: 3rem;
            font-weight: 300;
            letter-spacing: 1px;
            animation: fadeInUp 0.8s 0.3s ease-out both;
        }
        
        .spine-logo {
            position: relative;
            width: 120px;
            height: 200px;
            margin: 0 auto;
            animation: spineFloat 4s infinite ease-in-out;
        }
        
        .spine-line {
            position: absolute;
            left: 50%;
            top: 10px;
            transform: translateX(-50%);
            width: 8px;
            height: 180px;
            background: linear-gradient(to bottom, #81C784, #4CAF50);
            border-radius: 4px;
            box-shadow: 0 4px 10px rgba(76, 175, 80, 0.2);
        }
        
        .vertebra {
            position: absolute;
            width: 30px;
            height: 12px;
            background-color: #2E7D32;
            border-radius: 6px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        
        .vertebra:nth-child(2) { top: 25px; }
        .vertebra:nth-child(3) { top: 60px; }
        .vertebra:nth-child(4) { top: 95px; }
        .vertebra:nth-child(5) { top: 130px; }
        .vertebra:nth-child(6) { top: 165px; }
        
        .leaf-decoration {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.15;
        }
        
        .leaf {
            position: absolute;
            width: 80px;
            height: 80px;
            background: radial-gradient(#A5D6A7, #4CAF50);
            border-radius: 50%;
            filter: blur(10px);
        }
        
        .leaf:nth-child(1) { top: -30px; left: -40px; }
        .leaf:nth-child(2) { bottom: -20px; right: -30px; }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes spineFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        /* 主页样式 */
        #main-content {
            display: none;
            height: 100%;
        }
        
        .header {
            position: sticky;
            top: 0;
            background: linear-gradient(135deg, #1a936f, #88d498);
            padding: 15px 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .search-container {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 25px;
            padding: 8px 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .search-container i {
            color: #88d498;
            margin-right: 10px;
            font-size: 18px;
        }
        
        .search-container input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 16px;
            background: transparent;
        }
        
        .content {
            padding: 20px;
            background-color: #f8f9fa;
            height: calc(100% - 120px);
            overflow-y: auto;
        }
        
        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .section-title h2 {
            font-size: 20px;
            color: #1a936f;
        }
        
        .section-title a {
            color: #88d498;
            text-decoration: none;
            font-size: 14px;
        }
        
        .courses-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .course-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
        }
        
        .course-card:hover {
            transform: translateY(-5px);
        }
        
        .course-img {
            height: 120px;
            background-color: #e0f0e7;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #88d498;
            font-size: 40px;
        }
        
        .course-info {
            padding: 12px;
        }
        
        .course-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 5px;
            color: #333;
        }
        
        .course-stats {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #888;
        }
        
        .featured-course {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 25px;
        }
        
        .featured-img {
            height: 180px;
            background: linear-gradient(45deg, #5bc0a5, #1a936f);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 60px;
        }
        
        .featured-info {
            padding: 20px;
        }
        
        .featured-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #1a936f;
        }
        
        .featured-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .featured-meta {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 13px;
        }
        
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            color: #888;
            text-decoration: none;
            font-size: 12px;
            transition: color 0.3s;
        }
        
        .nav-item.active {
            color: #1a936f;
        }
        
        .nav-item i {
            display: block;
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .nav-item:hover {
            color: #1a936f;
        }
        
        .page {
            display: none;
            min-height: calc(100vh - 120px);
            padding: 20px;
        }
        
        .page.active {
            display: block;
        }
        
        .page-title {
            font-size: 24px;
            color: #1a936f;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .placeholder-content {
            background: white;
            border-radius: 15px;
            padding: 40px 20px;
            text-align: center;
            color: #888;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }
        
        .placeholder-content i {
            font-size: 60px;
            color: #e0f0e7;
            margin-bottom: 20px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .app-title { font-size: 4rem; }
            .app-slogan { font-size: 1.3rem; }
            .spine-logo { transform: scale(0.9); }
        }
        
        @media (max-width: 480px) {
            .app-title { font-size: 3.2rem; }
            .app-slogan { font-size: 1.1rem; }
            .spine-logo { transform: scale(0.8); }
            
            .courses-container {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
            
            .course-img {
                height: 100px;
            }
            
            .featured-img {
                height: 150px;
            }
        }
    </style>
</head>
<body>
    <!-- 启动页面 -->
    <div id="splash-screen">
        <div class="splash-container">
            <h1 class="app-title">Moving</h1>
            <p class="app-slogan">你的私人运动康复师</p>
            
            <div class="spine-logo">
                <!-- 脊柱结构 -->
                <div class="spine-line"></div>
                <div class="vertebra"></div>
                <div class="vertebra"></div>
                <div class="vertebra"></div>
                <div class="vertebra"></div>
                <div class="vertebra"></div>
                
                <!-- 装饰性绿叶 -->
                <div class="leaf-decoration">
                    <div class="leaf"></div>
                    <div class="leaf"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 主页面内容 -->
    <div id="main-content">
        <!-- 首页内容 -->
        <div id="home-page" class="page active">
            <div class="header">
                <div class="search-container">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索课程、动作或饮食">
                </div>
            </div>
            
            <div class="content">
                <!-- 热门推荐 -->
                <div class="featured-course">
                    <div class="featured-img">
                        <i class="fas fa-running"></i>
                    </div>
                    <div class="featured-info">
                        <div class="featured-title">7天脊柱灵活性训练</div>
                        <div class="featured-desc">帮助你恢复胸椎腰椎原本功能</div>
                        <div class="featured-meta">
                            <span><i class="fas fa-user"></i> 参与人数: 24.8万</span>
                            <span><i class="fas fa-star"></i> 评分: 4.9</span>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐课程 -->
                <div class="section-title">
                    <h2>推荐课程</h2>
                    <a href="#">查看更多 <i class="fas fa-angle-right"></i></a>
                </div>
                
                <div class="courses-container">
                    <div class="course-card">
                        <div class="course-img">
                            <i class="fas fa-dumbbell"></i>
                        </div>
                        <div class="course-info">
                            <div class="course-title">家庭关节稳定性训练</div>
                            <div class="course-stats">
                                <span>12节课</span>
                                <span>4.8★</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="course-card">
                        <div class="course-img">
                            <i class="fas fa-heartbeat"></i>
                        </div>
                        <div class="course-info">
                            <div class="course-title">呼吸训练入门</div>
                            <div class="course-stats">
                                <span>8节课</span>
                                <span>4.7★</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="course-card">
                        <div class="course-img">
                            <i class="fas fa-walking"></i>
                        </div>
                        <div class="course-info">
                            <div class="course-title">晨间唤醒</div>
                            <div class="course-stats">
                                <span>7节课</span>
                                <span>4.9★</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="course-card">
                        <div class="course-img">
                            <i class="fas fa-apple-alt"></i>
                        </div>
                        <div class="course-info">
                            <div class="course-title">健康饮食</div>
                            <div class="course-stats">
                                <span>10节课</span>
                                <span>4.6★</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="course-card">
                        <div class="course-img">
                            <i class="fas fa-child"></i>
                        </div>
                        <div class="course-info">
                            <div class="course-title">核心训练</div>
                            <div class="course-stats">
                                <span>9节课</span>
                                <span>4.8★</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="course-card">
                        <div class="course-img">
                            <i class="fas fa-bed"></i>
                        </div>
                        <div class="course-info">
                            <div class="course-title">睡前拉伸</div>
                            <div class="course-stats">
                                <span>5节课</span>
                                <span>4.9★</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 热门训练 -->
                <div class="section-title">
                    <h2>热门训练</h2>
                    <a href="#">查看更多 <i class="fas fa-angle-right"></i></a>
                </div>
                
                <div class="courses-container">
                    <div class="course-card">
                        <div class="course-img">
                            <i class="fas fa-fire"></i>
                        </div>
                        <div class="course-info">
                            <div class="course-title">胸椎关节灵活性</div>
                            <div class="course-stats">
                                <span>18分钟</span>
                                <span>4.9★</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="course-card">
                        <div class="course-img">
                            <i class="fas fa-hands"></i>
                        </div>
                        <div class="course-info">
                            <div class="course-title">核心力量</div>
                            <div class="course-stats">
                                <span>25分钟</span>
                                <span>4.7★</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="course-card">
                        <div class="course-img">
                            <i class="fas fa-moon"></i>
                        </div>
                        <div class="course-info">
                            <div class="course-title">冥想放松</div>
                            <div class="course-stats">
                                <span>15分钟</span>
                                <span>4.8★</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 社区页面 -->
        <div id="community-page" class="page">
            <div class="page-title">社区</div>
            <div class="placeholder-content">
                <i class="fas fa-users"></i>
                <p>探索健身社区，分享你的健身旅程</p>
            </div>
        </div>
        
        <!-- 课程页面 -->
        <div id="course-page" class="page">
            <div class="page-title">全部课程</div>
            <div class="placeholder-content">
                <i class="fas fa-book-open"></i>
                <p>浏览完整课程目录，定制你的训练计划</p>
            </div>
        </div>
        
        <!-- 我的页面 -->
        <div id="profile-page" class="page">
            <div class="page-title">我的</div>
            <div class="placeholder-content">
                <i class="fas fa-user-circle"></i>
                <p>查看个人资料、训练记录和成就</p>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <a href="#" class="nav-item active" data-page="home-page">
                <i class="fas fa-home"></i>
                首页
            </a>
            <a href="#" class="nav-item" data-page="community-page">
                <i class="fas fa-users"></i>
                社区
            </a>
            <a href="#" class="nav-item" data-page="course-page">
                <i class="fas fa-dumbbell"></i>
                课程
            </a>
            <a href="#" class="nav-item" data-page="profile-page">
                <i class="fas fa-user"></i>
                我的
            </a>
        </div>
    </div>

    <script>
        // 在页面加载后2秒切换到主页面
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                const splashScreen = document.getElementById('splash-screen');
                const mainContent = document.getElementById('main-content');
                
                // 淡出启动页
                splashScreen.style.opacity = '0';
                splashScreen.style.transform = 'scale(1.1)';
                
                // 淡入主页面
                setTimeout(function() {
                    splashScreen.style.display = 'none';
                    mainContent.style.display = 'block';
                    mainContent.style.opacity = '0';
                    
                    setTimeout(function() {
                        mainContent.style.opacity = '1';
                        mainContent.style.transition = 'opacity 0.5s ease';
                    }, 50);
                }, 800);
            }, 3000); // 修改为3000毫秒（3秒）
        });
        
        // 导航切换功能
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有active类
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                });
                document.querySelectorAll('.page').forEach(page => {
                    page.classList.remove('active');
                });
                
                // 添加active类到当前项
                this.classList.add('active');
                const pageId = this.getAttribute('data-page');
                document.getElementById(pageId).classList.add('active');
            });
        });
        
        // 添加简单的交互效果
        document.querySelectorAll('.course-card').forEach(card => {
            card.addEventListener('click', function() {
                alert('课程详情页面将在完整应用中打开');
            });
        });
    </script>
</body>
</html>